<script setup>
import { ref } from 'vue'
import { Calendar } from '@element-plus/icons-vue'
import UserInfoPage from '@/components/person/UserInfoPage.vue'


import UserProjectPage from '@/components/person/UserProjectPage.vue'
import UserPushPage from '@/components/person/UserPushPage.vue'
import UserResourcePage from '@/components/person/UserResourcePage.vue'
import UserNeedPush from '@/components/person/self/UserNeedPush.vue'

const floutNumber = ref(3.7)
</script>

<template>


  <!-- 基本数据信息 -->
   <div class="cus-base-point" >
    <el-row>
    <el-col :span="6">
      <el-statistic :precision="2" title="积分" :value="300.24" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="资源量" :value="300" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="需求量" :value="300" />
    </el-col>
    <el-col :span="6">
      <el-statistic :precision="2" title="评分" :value="floutNumber" />
    </el-col>
  </el-row>
   </div>
  

  <!-- type信息 -->
   <div>
    <el-tabs type="border-card" class="demo-tabs">
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>我的需求</span>
        </span>
      </template>
      <div>
        <UserInfoPage></UserInfoPage>
      </div>
    </el-tab-pane>
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>需求发布</span>
        </span>
      </template>
      <div>
        <UserNeedPush></UserNeedPush>
      </div>
    </el-tab-pane>
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>我的资源</span>
        </span>
      </template>
      <div>
        <UserResourcePage/>
      </div>
    </el-tab-pane>
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>项目</span>
        </span>
      </template>
      <div>
        <UserProjectPage></UserProjectPage>
      </div>
    </el-tab-pane>
    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>个人信息</span>
        </span>
      </template>
      <div>
        <UserInfoPage></UserInfoPage>
      </div>
    </el-tab-pane>
  

    <el-tab-pane>
      <template #label>
        <span class="custom-tabs-label">
          <el-icon><calendar /></el-icon>
          <span>消息</span>
        </span>
      </template>
      <div>
        <UserPushPage></UserPushPage>
      </div>
    </el-tab-pane>
    
  </el-tabs>
   </div>
  
</template>

<style lang="scss" scoped>
.el-col {
  text-align: center;
}
// 积分
.cus-base-point{
  margin-top: 30px;
  padding: 5px;
  margin-bottom: 20px;
  height: 60px; 
  background-color: #fff;
  
}

:v-deep  .el-tabs--border-card > .el-tabs__header .el-tabs__item{
  height: 60px;
  font-size: 16px;
}
</style>